<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>

        .numberBox{
          display: inline-block;
            border:1px solid #eee;
            padding:5px;
            width: 30%;
            text-align: center;
            font-weight: bold;
            margin-left:5px;
            height: 30px;
        }

        .ibox-content .row{

            margin:10px 0;
        }
        .func-item{
            border: 1px solid #eee;
            width: 100px;
            height: 100px;
            text-align: center;
            position: relative;
            font-weight: bold;
            margin:10px 0px;
            cursor: pointer;
        }
        .func-item img{

            width: 40%;
            margin:20px 0px;
            margin-bottom: 10px;

        }
        .ibox-button{

            position: absolute;
            right: 30px;
            top: 15px;
        }

    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div style="width: 75%;display: inline-block">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">

                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-4">
                                    累计扫描单品

                                    <div id="total" class="numberBox">
                                        0
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    累计单品成功 <div id="successTotal" class="numberBox">
                                    0
                                </div>
                                </div>
                                <div class="col-sm-4">
                                    累计完成箱数<div id="xiangTotal" class="numberBox">
                                    0
                                </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-sm-5">
                                    当前箱码

                                    <div id="xiangCode" class="numberBox" style="width: 50%">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    当前箱内计数<div id="xiangIndex" class="numberBox">
                                    0
                                </div>
                                </div>
                                <div class="col-sm-4">
                                    扫描通过率<div class="numberBox" id="rate" style="width: 35%">
                                   0%
                                </div>
                                </div>

                            </div>


                            <div class="row">
                                <div class="col-sm-4">
                                    产品名称

                                    <div class="numberBox" id="productName" style="width: 60%">

                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    品项名称 <div class="numberBox" id="typeName" style="width: 60%">

                                </div>

                                </div>
                                <div class="col-sm-4">
                                    规格 <div class="numberBox" id="guige" style="width: 80%">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h4> 当前箱数据</h4>
                        </div>
                        <div class="ibox-content" style=";height: 100px;padding-right: 5%;">
                            <div id="codeBox" style="overflow: auto;overflow-x: hidden;height: 100%;margin-top:10px;">
                                <table class="table table-striped" style="text-align: center;margin:0 10px; ">
                                    <tbody id="tbody">





                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h4> 生产及时消息</h4>

                        </div>
                        <div  class="ibox-button">
                            <button class="btn btn-success" onclick="clearMsg()">清空</button>
                        </div>
                        <div class="ibox-content" style=";height: 300px;padding-right:5%;">
                            <div id="msgBox" style="overflow: auto;overflow-x: hidden;height: 100%;margin-top:10px;">
                                <table class="table table-striped" style="margin:0 10px; ">
                                    <tbody id="tmsg">




                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="   width: 20%;
    display: inline-block;
    float: right;">
            <div class="row" >
                <div style="position:relative;left: 30%;;top:-10px;z-index: 9999">
                    <button class="btn btn-success" onclick="refreshProduct()"> <i class="fa fa-refresh"></i> 同步产品</button>
                    <button class="btn btn-success" onclick="reload()"> <i class="fa fa-refresh"></i> 刷新</button>
                </div>
            </div>
            <div class="row" style="height: 800px; ">

                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h4> 控制区</h4>
                        </div>

                        <div class="ibox-content" style="display: grid;
    place-items: center; /* 水平和垂直居中 */
    height: 100%; /*"">
                            <div class="func-item" onclick="renwuEvent()">
                                <div>
                                    <img id="renwu_btn" src="img/renwu_on.png"/>

                                </div>
                                任务设置
                            </div>
                            <div class="func-item" onclick="startrenwu()">
                                <div> <img id="start_btn" src="img/start_off.png"/>

                                </div>
                                开始生产
                            </div>

                            <div class="func-item" onclick="pauserenwu()">
                                <div> <img id="pause_btn" src="img/zanting_off.png"/>

                                </div>
                                暂停生产
                            </div>

                            <div class="func-item" onclick="stoprenwu()">
                                <div> <img id="stop_btn" src="img/ting_off.png"/>

                                </div>
                                停止生产
                            </div>



                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>


    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- jQuery Validation plugin javascript-->
    <script src="js/plugins/validate/jquery.validate.min.js"></script>
    <script src="js/plugins/validate/messages_zh.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <script src="js/tm/edit.js"></script>
    <script>
        function refreshProduct(){
            sendData("/produce/syncproduct",{},function(){
                layer.msg("同步成功");
                getProduct();
            })
        }
        function reload(){
            location.reload();
        }
        let ws = null;
        let runStatus = 0;
        let productsMap = {};
        let pageId = 1;
        layer.load(2,{
            shade: [0.5, 'gray'], //0.5透明度的灰色背景
            content:"初始化中，请稍后",
            success: function (layero) {
                layero.find('.layui-layer-content').css({
                    'padding-top': '39px',
                    'margin-left' :'39px',
                    'width' :'120px',
                    'background-position-x':'30px'
                });
            }
        });
        window.onload = function(){
            doWebsocket();
            getProduct();
        }

        let skuMap = {};
        function getProduct(){
            sendData("/produce/getProduct",{},function(res){
                let data = res.data;
                productsMap = {};
                skuMap = {};
                for (let i = 0; i <data.products.length ; i++) {
                    let product = data.products[i];
                    productsMap[product.product_id] = product.product_name;
                    skuMap[product.product_id] = product.types
                }
                console.log(skuMap);
            });
        }
        function doWebsocket(){
            // 替换为服务器的WebSocket地址
            const url = 'ws://127.0.0.1:8090/websocket/'+pageId;

// 创建一个新的WebSocket对象
            ws = new WebSocket(url);

// 打开连接
            ws.onopen = function(event) {
                console.log('WebSocket connection opened:', event);
                // 可以发送消息给服务器
                ws.send('Hello Server!');
            };

// 监听消息事件
            ws.onmessage = function(event) {
                let data = event.data;
                layer.closeAll();
                data = JSON.parse(data);
                console.log(data);
                let type = data.type;
                if(type == 1){
                    handle(data.data);
                }else if(type == 2){
                    handMsg(data.data);
                }



            };

// 监听错误事件
            ws.onerror = function(error) {
                console.error('WebSocket Error:', error);
            };

// 监听关闭事件
            ws.onclose = function(event) {
                console.log('WebSocket connection closed:', event);
            };
        }

        function clearMsg(){
            $("#tmsg").html("");
        }

        function handMsg(msg){
            $("#tmsg").append('<tr><td>'+msg+'</td></tr>');

            const box = document.querySelector('#msgBox');
            box.scrollTo(0, box.scrollHeight - box.clientHeight);  //最底部
        }

        function handle(data){
            let status = data.status;
            runStatus = status;
            if(status == 0){//当前无任务
                $("#renwu_btn").attr("src",'img/renwu_on.png');
                $("#start_btn").attr("src",'img/start_off.png');
                $("#pause_btn").attr("src",'img/zanting_off.png');
                $("#stop_btn").attr("src",'img/ting_off.png');
            }else if(status == 1){
                $("#renwu_btn").attr("src",'img/renwu_off.png');
                $("#start_btn").attr("src",'img/start_on.png');
                $("#pause_btn").attr("src",'img/zanting_off.png');
                $("#stop_btn").attr("src",'img/ting_on.png');
            }else if(status == 2){
                $("#renwu_btn").attr("src",'img/renwu_off.png');
                $("#start_btn").attr("src",'img/start_off.png');
                $("#pause_btn").attr("src",'img/zanting_on.png');
                $("#stop_btn").attr("src",'img/ting_on.png');
            }else if(status == 3){
                $("#renwu_btn").attr("src",'img/renwu_off.png');
                $("#start_btn").attr("src",'img/start_off.png');
                $("#pause_btn").attr("src",'img/zanting_on.png');
                $("#stop_btn").attr("src",'img/ting_on.png');
            }

            renderData(data);
        }
        function startrenwu(){
            if(runStatus == 1){
                ws.send("start");
                setTimeout(function(){
                    doGetProduceInfo();
                },500)
            }
        }

        function pauserenwu(){
            if(runStatus == 2){
                ws.send("pause");
                setTimeout(function(){
                    doGetProduceInfo();
                },500)
            }
        }

        function stoprenwu(){
            if(runStatus == 2 || runStatus == 1){
                ws.send("stop");
                setTimeout(function(){
                    doGetProduceInfo();
                },500)
            }
        }
        function doGetProduceInfo(){
            ws.send("getProduceInfo");
        }

        function renwuEvent() {
            if (runStatus == 0) {
                let data = [
                    {
                        field: "productId",
                        title: "产品",
                        dict: productsMap,
                        dataType:'dict',
                        change:function(){

                        }
                    },
                    {
                        field: "sku",
                        title: "品项",
                        dataType:'dict',
                        dict: {},
                    },
                    {
                        field: "banzu",
                        title: "班组",
                        dataType:'dict',
                        dict: {"1":"早班","2":"晚班"}
                    },
                    // {
                    //     field: "xiangNum",
                    //     title: "生产箱数",
                    // }
                    // ,
                    {
                        field: "produceDate",
                        title: "生产日期",
                        dataType:"datetime"
                    },


                ];
                let html = parseEditData(data);
                layer.open({
                    type: 1,
                    title: '新增任务',
                    btn: ["确定", "取消"],
                    area: ["500px", "400px"],
                    shadeClose: true, //点击遮罩关闭
                    content: '<div class="ibox-content form-horizontal"><form id="newForm" class="form-horizontal"  method="post">\
          	' + html + '\
         </form>\
        </div>',
                    yes: function () {
                        var arry = $("#newForm").serializeArray();
                        let obj = {};
                        for(var i=0;i<arry.length;i++){
                            var cur = arry[i];
                            let name = cur.name;
                            obj[cur.name] = cur.value;
                        }
                        // if(!obj.xiangNum ){
                        //     layer.msg("生产箱数不能为空")
                        //     return;
                        // }

                        // if(!obj.xiangIndex ){
                        //     layer.msg("每箱数目不能为空")
                        //     return;
                        // }
                        if(!obj.produceDate ){
                            layer.msg("生产日期不能为空")
                            return;
                        }
                        sendData("/produce/addTask",obj,function(res){
                            doGetProduceInfo();
                        });
                    }
                });
                productChange();
            }
        }


        function doCheck(array){
            var len = array.length;
            for(var i =0 ;i<len;i++){
                var dataObj = array[i];
                var field = dataObj.name;
                var value = dataObj.value;
                if(value == null || value == ""){
                    return colData.title  +"不能为空";
                }
            }
            return null;
        }
            function parseEditData(datas) {
                let html = '';
                for (let i = 0; i < datas.length; i++) {
                    html += getRenderHtml(datas[i],{xiangIndex:5});
                }
                return html;
            }

            function renderData(data) {
                $("#total").html(data.childTotal);
                $("#successTotal").html(data.successTotal);
                $("#xiangTotal").html(data.xiangTotal);
                if(!data.xiangCode.trim()){
                    data.xiangCode = "暂无"
                }

                $("#xiangCode").html(data.xiangCode);

                $("#rate").html(data.rate);
                $("#productName").html(data.productName);
                $("#typeName").html(data.productType);
                $("#guige").html(data.guige);
                let scanList = data.scanList;
                $("#xiangIndex").html(data.xiangNum);
                $("#tbody").html("");
                for (let i = 0; i < scanList.length; i++) {
                    $("#tbody").append('<tr><td>' + scanList[i] + '</td></tr>');
                }
                const box = document.querySelector('#codeBox');
                box.scrollTo(0, box.scrollHeight - box.clientHeight);  //最底部
            }

            function productChange(){
                let productId = $("#productId").val();

                let types = skuMap[productId]
                let html = '';
                for (let i = 0; i < types.length; i++) {
                    html += '<option value="'+types[i].sku+'">'+types[i].kouwei+'</option>'
                }
                $("#sku").html(html);
            }
    </script>
</body>
</html>
